<template>
	<!-- #ifdef H5 -->
	<view v-if="showBackBtn || showHomeBtn" class="navbar dis-flex" :style="{top: top, width: width}">
		<view v-if="showBackBtn" class="btn dis-flex flex-y-center" @click="goBack">
			<view class="btn-container dis-flex flex-center">
				<text class="btn__img dy-iconfont icon-back"></text>
			</view>
		</view>
		<view v-if="showHomeBtn" class="btn dis-flex flex-y-center" @click="goHome">
			<view class="btn-container dis-flex flex-center">
				<text class="btn__img dy-iconfont icon-home"></text>
			</view>
		</view>
		<slot></slot>
	</view>
	<!-- #endif -->
</template>
<script>
	export default {
		props: {
			top: {
				type: String,
				default: '0rpx'
			},
			width: {
				type: String,
				default: 'auto'
			}
		},
		data() {
			return {
				showBackBtn: false,
				showHomeBtn: false
			}
		},
		created() {

			// #ifdef H5 
			let tabBarLinks = getApp().getTabBarLinks();
			let currentPages = getCurrentPages();
			let pageCount = currentPages.length; // 栈里有几个页面
			let topPage = currentPages[pageCount - 1];
			// 只有一个页面，且不是tabbar页面，显示首页按钮
			this.showHomeBtn = (1 === pageCount && -1 === tabBarLinks.indexOf(topPage.route))
			// 有多个页面时，显示返回按钮
			this.showBackBtn = (1 < pageCount);
			// #endif

		},
		methods: {
			goBack: function() {
				uni.navigateBack();
			},
			goHome: function() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.dis-flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
	}

	.flex-y-center {
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.flex-x-center {
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}

	.flex-center {
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}

	.navbar {
		position: fixed;
		padding-left: 10rpx;
		box-sizing: border-box;
		z-index: 10000;
	}

	.navbar .btn {
		width: 100rpx;
		height: 88rpx;
	}

	.navbar .btn-container {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, .5);
	}

	.navbar .btn__img {
		color: $uni-text-color-inverse;
		font-size: 20px;
	}
</style>
